<template>
  <div>
    <!-- 头部开始 -->
    <div class="toubu" v-show="show == 0">
      <span>
        标签名称 :
        <el-input class="inp" v-model="input" placeholder="请输入 标签名称"></el-input>
      </span>
      <span class="xzzt">
        状态 :
        <el-select v-model="value" placeholder="请选择 状态">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </span>
      <!-- btn按钮 -->
      <el-button class="btn1" icon="el-icon-search" @click="search" type="primary">搜索</el-button>
      <el-button icon="el-icon-delete" @click="clear">清空</el-button>
    </div>
    <!-- 头部二 -->
    <div class="head-t clearfix">
      <div class="head-t-left">
        <el-button type="primary" icon="el-icon-plus" @click="newly">新增</el-button>
      </div>
      <div class="head-t-right">
        <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
        <el-button icon="el-icon-search" circle @click="xians"></el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tab">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="title" label="标签名称" width="280">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.statuss === '正常' ? 'primar' : 'danger'">{{ scope.row.statuss }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isDefault" label="默认类型" width="280">
          <template slot-scope="scope">
            <el-tag type='primar'>{{ scope.row.isDefaultt }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="seq" label="排序" width="280">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框添加 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules">
        <el-form-item label="标签名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="radio" v-removeAriaHidden>
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">禁用</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="列表样式" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="radiol" v-removeAriaHidden>
              <el-radio :label="0">一列一个</el-radio>
              <el-radio :label="1">一列两个</el-radio>
              <el-radio :label="2">一列三个</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <template>
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="moqd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框回显 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisibles">
      <el-form :model="form" :rules="rules">
        <el-form-item label="标签名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="radio" v-removeAriaHidden>
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">禁用</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="列表样式" :label-width="formLabelWidth">
          <template>
            <el-radio-group v-model="radiol" v-removeAriaHidden>
              <el-radio :label="0">一列一个</el-radio>
              <el-radio :label="1">一列两个</el-radio>
              <el-radio :label="2">一列三个</el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <template>
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="moqd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"  background :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页
      currentPage4: 1,
      total: 0,
      pages: 10,
      foom: "",

      // 头部显示
      show: 0,
      // 时间戳
      timestamp: Math.floor(Date.now() / 1000),
      // 头部
      input: "",
      options: [
        {
          value: "0",
          label: "禁用",
        },
        {
          value: "1",
          label: "正常",
        },
      ],
      value: "",
      // 单选按钮
      radio: '1',
      radiol: 3,
      // 计数器
      num: 1,
      // 表单校验
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
      },
      // 表格
      tableData: [

      ],
      // 模态框
      dialogFormVisibles: false,
      dialogFormVisible: false,
      form: {
        title: ''
      },
      formLabelWidth: '120px'
    };
  },
  created() {
    this.MyList()
  },
  methods: {
    // 时间戳
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    // 头部显示
    xians() {
      if (this.show == 0) {
        this.show = 1;
      } else if (this.show == 1) {
        this.show = 0;
      }
    },
    // 模态确定
    moqd() {
      console.log(this.form.title);
      console.log(this.radio);
      this.$http.post("http://admin.yami.byesame.com/apis/prod/prodTag", {
        id: 0,
        isDefault: null,
        prodCount: null,
        seq: this.num,
        shopId: null,
        status: this.radio,
        style: this.radiol,
        title: this.form.title,
        t: this.timestamp
      }).then((res) => {
        console.log("添加确定", res);
        this.MyList()
      })
      this.dialogFormVisible = false
      this.dialogFormVisibles = false
    },
    // 表格按钮
    handleEdit(index, row) {
      console.log(index, row);
      this.$http.get("http://admin.yami.byesame.com/apis/prod/prodTag/info/18", {
        params: {
          t: this.timestamp
        }
      }).then((res) => {
        console.log("模态框回显", res);
        this.form.title = row.title,
          this.radio = row.status,
          this.num = row.seq,
          this.radiol = row.style
      })
      this.dialogFormVisibles = true
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.$http.delete("http://admin.yami.byesame.com/apis/prod/prodTag/" + row.id, {
          data: {
            t: this.timestamp
          }
        }).then((res) => {
          console.log("删除", res);
          this.MyList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 计数器
    handleChange(value) {
      console.log(value);
    },
    // 表格信息
    MyList() {
      this.$http.get("http://admin.yami.byesame.com/apis/prod/prodTag/page", {
        params: {
          t: this.timestamp,
          current: 1,
          size: 10
        }
      }).then((res) => {
        console.log("表格信息", res);
        this.tableData = res.data.records
        this.total = res.data.total
        for (let i in res.data.records) {
          const item = res.data.records[i]
          if (item.status == 1) {
            item.statuss = '正常'
          } else {
            item.statuss = '禁用'
          }
          if (item.isDefault == 0) {
            item.isDefaultt = "自定义类型"
          } else {
            item.isDefaultt = "默认类型"
          }
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pages = val;
      console.log("页码", this.pages);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.foom = val;
      console.log("当前页", this.foom);
      this.$http
        .get("http://admin.yami.byesame.com/apis/prod/prodTag/page", {
          params: {
            t: this.timestamp,
            current: this.foom,
            size: this.pages,
          },
        })
        .then((res) => {
          console.log("表格数据", res);
          this.tableData = res.data.records;
          this.total = res.data.total;
          for (let i in res.data.records) {
          const item = res.data.records[i]
          if (item.status == 1) {
            item.statuss = '正常'
          } else {
            item.statuss = '禁用'
          }
          if (item.isDefault == 0) {
            item.isDefaultt = "自定义类型"
          } else {
            item.isDefaultt = "默认类型"
          }
        }
        });
    },
    // 刷新
    refresh() {
      this.MyList()
    },
    //  搜索
    search() {
      // console.log(111);
      this.$http.get("http://admin.yami.byesame.com/apis/prod/prodTag/page", {
        params: {
          t: this.timestamp,
          current: 1,
          size: 10,
          title: this.input,
          status: this.value
        }
      }).then((res) => {
        console.log("搜索", res);
        this.tableData = res.data.records
        this.total = res.data.total
        for (let i in res.data.records) {
          const item = res.data.records[i]
          if (item.status == 1) {
            item.statuss = '正常'
          } else {
            item.statuss = '禁用'
          }
          if (item.isDefault == 0) {
            item.isDefaultt = "自定义类型"
          } else {
            item.isDefaultt = "默认类型"
          }
        }
      })

    },
    // 清空
    clear() {
      this.input = "",
        this.value = ""
    },
    // 新增
    newly() {
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style scoped>
/* 头部 */
.inp {
  width: 20%;
}

.xzzt {
  margin-left: 20px;
}

.btn1 {
  margin-left: 10px;
}

/* 头部二 */
.head-t {
  margin-top: 20px;
}

.head-t-left {
  float: left;
}

.head-t-right {
  float: right;
}

>>>.el-table .cell {
  text-align: center;
}
</style>